<template>
	<view class="mainPage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="box">
			<view class="box1">
				<view class="title">
					写作指南
				</view>
				<view class="list">
					<view class="item">
						<navigator hover-class="none" url="./commonProblem">
						1、常见问题解答
						</navigator>
					</view>
					<view class="item">
						<navigator hover-class="none" url="./articleSpecification">
						2、文章撰写规范
						</navigator>
					</view>
				</view>
			</view>
			<view class="box2">
				<view class="title">
					推荐文章
				</view>
				<view class="content">
					<view class="item"  v-for="(item,index) in articleList" :key="index">
						<navigator hover-class="none" :url="'./articleDetails?articleId='+item.id">
							<view class="item1" >
								<view class="left" :class="!item.thumb?'active':''">
									<view class="neirong">
										<view class="neirong-title">
											{{item.title.slice(0,20)}}
										</view>
										<view class="desc">
											{{item.content}}
											<!-- <rich-text  :nodes="item.content"></rich-text> -->
										</view>
									</view>
									<view class="bottom">
										<text class="name">{{item.user_name}}</text>
										<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/yanjing.png" mode=""></image>
										<text class="num">{{item.browse}}</text>
									</view>
								</view>
								<view class="right" v-if="item.thumb">
									<image :src="item.thumb" mode=""></image>
								</view>
							</view>
						</navigator>
					</view>
				
					<u-loadmore class="load-marTop" v-if="articleList.length>=10" :status="status" :load-text="loadText" />
				</view>
			</view>
		</view>
	
		<view class="fabu" @click="unfold()">
			<image class="fabu-bth" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/fabu-bth.png" mode=""></image>
		</view>
		
		<view class="list1" :class="zhankai?'active':''">
			<view class="item">
				<navigator url="./issue" hover-class="none">
					<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/fabu.png" mode=""></image>
					<text>发布</text>
				</navigator>
			</view>
			<view class="item">
				<navigator hover-class="none" url="./drafts">
					<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/caogaoxiang.png" mode=""></image>
					<text>草稿箱</text>
				</navigator>
			</view>
			<view class="item">
				<navigator hover-class="none" url="./myArticle">
					<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/wode.png" mode=""></image>
					<text>我的</text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	import {mapState} from "vuex"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '文章中心',
				zhankai:false,
				
				articleList:"",
				page:1,
				
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		computed:{
			...mapState(['articleTitle','html'])
		},
		onReachBottom() {   ///page 加载
			if(that.status == 'nomore'){
				return
			}
			console.log("触底la")
			that.status = 'loading';
			that.page = ++ that.page;
			setTimeout(() => {
				that.requestData(that.page)
			}, 500)
		},
		onShow() {
			console.log(that.articleTitle,that.html,99999999)
			if(that.articleTitle==''&&that.html==''){
				return
			}else{
				uni.showModal({
				    title: '取消发布',
				    content: '未发布内容将会保存在草稿箱？',
					cancelText:"暂不发布",
					cancelColor:"#343434",
					confirmText:"保存草稿",
					confirmColor:"#FE7600",
				    success: function (res) {
				        if (res.confirm) {
				            console.log('保存');
							// console.log(that.articleTitle,that.html)
							that.caogao()
				        } else if (res.cancel) {
				            console.log('不保存');
							that.$store.state.articleTitle=""
							that.$store.state.html=""
				        }
				    }
				});
			}
		},
		onLoad() {
			that=this
			that.requestData(that.page)
		},
		onHide() {
			that.zhankai=false
		},
		methods: {
			unfold(){
				that.zhankai=!that.zhankai
			},
			
			requestData(page){  //https://ask.suoweilai.com/PetDoctor_article_index  医生端-文章中心 - 文章中心-推荐文章
				that.$postAjax1('PetDoctor_article_index',{
					page:page
				},function(data){
					// console.log(that.articleList,9999)
					for(var i=0;i<data.data.data.length;i++){
						data.data.data[i].content=data.data.data[i].content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g,'。').replace(/&nbsp;/ig,'').replace(/(\n)/g, "").replace(/(\t)/g, "").replace(/<\/?[^>]*>/g, "")
					}
					if(that.page==1){
						that.articleList=data.data.data
					}else{
						that.articleList=that.articleList.concat(data.data.data)
					}
					if(data.data.data.length<10) that.status = 'nomore';
					else that.status = 'loading';
					
					console.log(data.data.data)
				})
			},
			
			caogao(){
				var imgs = [];
				that.html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (match, capture) {
				  imgs.push(capture);
				});
				
				that.$postAjax1('Doctor_add_article',{ //https://ask.suoweilai.com/Doctor_add_article  医生端 - 添加医生发表文章
					content:that.html,  //内容发布
					title:that.articleTitle,    //文章标题
					thumb:imgs.length?imgs[0]:'',    //缩略图
					write_status:0,    //发布状态(0草稿 1发表)
				},function(data){
					// console.log(data,99999)
					uni.showToast({
						icon:"none",
						title:"草稿保存成功！"
					})
					
					that.$store.state.articleTitle=""
					that.$store.state.html=""
				})
					
				
			},
		}
	}
</script>

<style scoped lang="scss">

.box{
	padding-top: 20rpx;
	// padding-bottom: 100rpx;
	.box1{
		background-color: #FFFFFF;
		padding: 0 32rpx;
		margin-bottom: 16rpx;
		.title{
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			line-height: 44rpx;
			padding: 14rpx 0 22rpx;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			.item{
				width: 50%;
				font-size: 28rpx;
				font-weight: 400;
				color: #343434;
				line-height: 40rpx;
				margin-bottom: 26rpx;
			}
		}
	}
	.box2{
		background-color: #FFFFFF;
		padding: 0 32rpx 100rpx;
		.title{
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			line-height: 44rpx;
			padding: 24rpx 0 0;
		}
		.content{
			.item{
				border-bottom: 2rpx solid rgba(0,0,0,0.08);
				.item1{
					display: flex;
					padding: 20rpx 0;
					align-items: center;
					justify-content: space-between;
					.left{
						margin-right: 32rpx;
						width: calc(100% - 32rpx - 226rpx);
						&.active{
							width: 100%;
						}
						.neirong{
							width: 100%;
							overflow: hidden;
							min-height: 132rpx;
							.neirong-title{
								font-size: 32rpx;
								font-weight: 500;
								color: #343434;
								line-height: 44rpx;
								margin-bottom: 10rpx;
							}
							.desc{
								font-size: 28rpx;
								line-height: 38rpx;
								font-weight: 400;
								color: #343434;
								width: 100%;
								
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
						.bottom{
							.name{
								font-size: 24rpx;
								font-weight: 400;
								color: #999999;
								line-height: 36rpx;
								margin-right: 30rpx;
								vertical-align: middle;
							}
							image{
								display: inline-block;
								width: 32rpx;
								height: 20rpx;
								vertical-align: middle;
							}
							.num{
								font-size: 24rpx;
								font-weight: 400;
								color: #939499;
								line-height: 30rpx;
								margin-left: 4rpx;
								vertical-align: middle;
							}
						}
						
					}
					.right{
						image{
							display: inline-block;
							width: 226rpx;
							height: 176rpx;
							background: #D8D8D8;
							border-radius: 8rpx;
						}
					}
								
				}
							
			}
			
		}
	}
}
.fabu{
	position: fixed;
	bottom: 50rpx;
	right: 32rpx;
	.fabu-bth{
		display: inline-block;
		width: 112rpx;
		height: 112rpx;
	}
	
}
.list1{
	position: fixed;
	bottom: 200rpx;
	right: 0;
	width: 132rpx;
	height: 0;
	background: #FFFFFF;
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.5);
	border-radius: 16rpx 0rpx 0rpx 16rpx;
	text-align: center;
	overflow: hidden;
	transition: all 0.3s;
	&.active{
		height: 560rpx;
	}
	.item{
		image{
			display: block;
			width: 54rpx;
			height: 50rpx;
			margin: auto;
			padding-top: 60rpx;
			margin-bottom: 12rpx;
		}
		text{
			font-size: 28rpx;
			font-weight: 400;
			color: #343434;
			line-height: 40rpx;
		}
		&:nth-of-type(2){
			image{
				width: 54rpx;
				height: 54rpx;
			}
		}
		&:nth-of-type(3){
			image{
				width: 60rpx;
				height: 58rpx;
			}
		}
	}
}
</style>
